<template>
  <h-drawer v-model="visible" :width="1200" unit="px" :loading="loading">
    <template #title>
      <span>{{ props.workNo ? '编辑费用' : '申请费用' }}</span>
    </template>

    <div v-if="props.workNo" class="info">
      <div class="info-item order-no">
        <div class="label">工单单号:</div>
        <div class="value">{{ props.workNo }}</div>
      </div>
      <div class="info-item check-status">
        <div class="label">审核状态:</div>
        <div class="value">
          <h-status v-if="feeDetail.status === 1" type="warning">待审核</h-status>
          <h-status v-if="feeDetail.status === 2" type="success">已通过</h-status>
          <h-status v-if="feeDetail.status === 3" type="error">已驳回</h-status>
          <h-status v-if="feeDetail.status === 4" type="info">已撒回</h-status>
          <h-status v-if="feeDetail.status === 5" type="info">已取消</h-status>
        </div>
      </div>
      <!-- <div class="info-item">
        <div class="label">审核备注:</div>
        <div class="value">
          <el-input
            v-model="feeForm.remark"
            type="textarea"
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
            resize="both"
          />
        </div>
      </div> -->
    </div>

    <div class="body">
      <el-table :border="true" resizable :data="feeList" :max-height="650">
        <!-- 序号 -->
        <el-table-column label="序号" width="50" type="index" fixed="left" :align="'center'" />

        <!-- 费用单号 -->
        <el-table-column v-if="props.workNo" label="费用单号" width="140" prop="feeNo" />

        <!-- 收支类型 -->
        <el-table-column label="结算类型" width="120">
          <template #default="{ row, $index }">
            <el-select
              v-model="row.type"
              placeholder="结算类型"
              @change="handleSettlementTypeSelect($index)"
            >
              <el-option v-if="!userStore.isCurrentRoleNetwork" :value="1" label="公司承担" />
              <el-option v-if="!userStore.isCurrentRoleNetwork" :value="2" label="收取客户" />
              <el-option :value="3" label="支付部门" />
            </el-select>
          </template>
        </el-table-column>

        <!-- 费用名称 -->
        <el-table-column label="费用名称" width="150">
          <template #default="{ row, $index }">
            <el-select
              v-model="row.workFeeProjectId"
              placeholder="请选择"
              filterable
              :filter-method="handleFeeOptionsSearch"
              :loading="getFeeOptionsLoading"
              :class="{
                'validate-fail-select': isEnableTableValidate && !row.workFeeProjectId,
              }"
            >
              <el-option
                v-for="item in feeOptions"
                :key="item.name"
                :value="item.id"
                :label="item.name"
                @click="handleChangeFeeProject(item, $index)"
              />
            </el-select>
          </template>
        </el-table-column>

        <!-- 公里数 -->
        <el-table-column label="公里数" width="160" show-overflow-tooltip>
          <template #default="{ row, $index }">
            <el-input
              v-model.trim="row.kilometers"
              placeholder="请输入公里数"
              style="width: 120px"
              :controls="false"
              :disabled="!allFeeKilometerEnabled[$index]"
              @change="handleKilometerInput($index)"
            />
          </template>
        </el-table-column>

        <!-- 申请数量 -->
        <el-table-column show-overflow-tooltip label="申请数量" width="160">
          <template #default="{ row, $index }">
            <el-input
              v-model.trim="row.qty"
              placeholder="请输入数量"
              :controls="false"
              style="width: 120px"
              @input="handleQtyInput($index)"
            />
          </template>
        </el-table-column>

        <!-- 公司承担 -->
        <el-table-column label="公司承担费用" width="180">
          <template #default="{ row, $index }">
            <el-input
              v-model.trim="row.price"
              :disabled="row.type !== 1"
              clearable
              style="width: 140px"
              placeholder="请输入公司承担费用"
              @input="(val: string) => handleCompanyBearInput($index, val)"
            />
          </template>
        </el-table-column>

        <!-- 客户承担 -->
        <el-table-column label="收取客户费用" width="180">
          <template #default="{ row, $index }">
            <el-input
              v-model.trim="row.customerUndertakePrice"
              :disabled="row.type !== 2"
              clearable
              style="width: 140px"
              placeholder="请输入收取客户费用"
              @input="(val: string) => handleCollectFromCustomerInput($index, val)"
            />
          </template>
        </el-table-column>

        <!-- 部门承担 -->
        <el-table-column label="支付部门费用" width="180">
          <template #default="{ row, $index }">
            <el-input
              v-model.trim="row.networkUndertakePrice"
              :disabled="row.type !== 3"
              clearable
              style="width: 140px"
              placeholder="请输入支付部门费用"
              @input="(val: string) => handlePayNetworkInput($index, val)"
            />
          </template>
        </el-table-column>

        <!-- 备注 -->
        <el-table-column show-overflow-tooltip label="备注" width="240">
          <template #default="{ row }">
            <el-input v-model.trim="row.remark" clearable placeholder="填写备注" maxlength="100" />
          </template>
        </el-table-column>

        <!-- 附件 -->
        <el-table-column label="附件(最多上传8个)" :width="annexColumnWidth">
          <template #default="{ row, $index }">
            <div class="updata_pic">
              <template v-for="(img, index) in row.images" :key="index">
                <h-image
                  :preview-src-list="row.images.map((item) => item.image)"
                  :width="60"
                  :height="37.5"
                  fit="scale-down"
                  :src="img.image"
                  :initial-index="index"
                  :padding="2"
                  :mask-btn-gap="3"
                  :show-del-btn="!img.id"
                  @del="handleFileDelClick($index, index)"
                />
              </template>
              <h-image
                v-if="row.images.length < 8"
                :src="uploadPlaceholderImg"
                :width="60"
                :height="37.5"
                :padding="2"
              >
                <el-upload
                  action="#"
                  multiple
                  accept="image/*"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="(file: UploadFile) => handleAddFile(file, $index)"
                >
                  <i class="iconfont icon-img-upload" style="font-size: 24px; color: #fff"></i>
                </el-upload>
              </h-image>
            </div>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column v-if="!props.workNo" label="操作" width="100" fixed="right">
          <template #default="{ row, $index }">
            <el-space :size="0" :spacer="spacer">
              <h-link
                v-if="!row.id && feeList.length > 1"
                type="error"
                @click="handleFeeDelClick($index)"
                >删除</h-link
              >
              <h-link v-if="$index === 0" @click="onAddFeeDetail">添加</h-link>
            </el-space>
          </template>
        </el-table-column>

        <!-- 审核 -->
        <!-- <el-table-column v-if="props.workNo" label="审核" width="160" fixed="right">
          <template #default="{ row }">
            <el-select v-model="row.status" placeholder="请选择审核状态">
              <el-option :value="2" label="通过" />
              <el-option :value="3" label="驳回" />
            </el-select>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <template #footer>
      <h-button is-modal type="primary" @click="onSave">保存</h-button>
      <h-button is-modal @click="onClose">取消</h-button>
    </template>
  </h-drawer>
</template>

<script lang="ts" setup>
  import { computed, h, ref, watch } from 'vue'
  import { ElDivider, ElUpload, UploadFile } from 'element-plus'
  import _ from 'lodash'
  import uploadPlaceholderImg from '@/assets/image/avatar_upload_default.png'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import {
    useGetFeeOptions,
    useOrderDetailFeeForm,
    useGetOrderFeeInfoBeforeEdit,
    useUpdateOrderDetailFee,
    useGetOrderDetailFeeDetail,
  } from '@/services/module/order/useFee'
  import { FeeListItem } from './types'
  import { useSaveSpecifyIntegerAndDecimal } from '@/hooks/useNumber'
  import { orderAnnexUpload } from '@/api/upload'
  import { useUserStore } from '@/store/modules/user'

  const { feeOptions, getFeeOptionsParam, getFeeOptionsLoading, getFeeOptions } = useGetFeeOptions()
  const { feeForm, feeFormSaveLoading, reserForm, formSave } = useOrderDetailFeeForm()
  const { feeInfo, getFeeInfoLoading, getFeeInfo } = useGetOrderFeeInfoBeforeEdit()
  const { updateForm, updateLoading, update } = useUpdateOrderDetailFee()
  const { feeDetail, getFeeDetailLoading, getFeeDetail } = useGetOrderDetailFeeDetail()

  // 如果有传workNo就是审核费用，否则就是申请费用
  const props = defineProps({
    workId: {
      type: String,
      default: () => '',
    },
    workNo: {
      type: String,
      default: () => '',
    },
    feeId: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 客户状态管理
  const userStore = useUserStore()

  // 加载
  const loading = computed(() => {
    return (
      fileUploadLoading.value ||
      feeFormSaveLoading.value ||
      getFeeInfoLoading.value ||
      updateLoading.value ||
      getFeeDetailLoading.value
    )
  })

  // 抽屉显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 是否开启表格检查
  const isEnableTableValidate = ref(false)

  // 费用列表
  const feeList = ref<Array<FeeListItem>>([])

  // 文件上传加载
  const fileUploadLoading = ref(false)

  // 附件列宽
  const annexColumnWidth = ref(160)

  // 所有费用的公里数开启状态
  const allFeeKilometerEnabled = computed(() => {
    return feeList.value.map((fee) => {
      const feeOption = feeOptions.value.find((feeOption) => feeOption.id === fee.workFeeProjectId)
      if (!feeOption) {
        return false
      }

      return feeOption.enableRemoteFees
    })
  })

  /**
   * 金额更新方法命令列表
   */
  const priceUpdateCommand = {
    companyBear: {
      execute: (index: number, price: string, type: 'update-fee' | 'input') => {
        const fee = feeList.value[index]
        if (!fee) {
          return false
        }

        if (type === 'update-fee' && Number(feeList.value[index].price)) {
          return false
        }

        feeList.value[index].price = price
        feeList.value[index].customerUndertakePrice = '0'
        feeList.value[index].networkUndertakePrice = '0'
      },
    },
    collectFromCustomer: {
      execute: (index: number, price: string, type: 'update-fee' | 'input') => {
        const fee = feeList.value[index]
        if (!fee) {
          return false
        }

        if (type === 'update-fee' && Number(feeList.value[index].customerUndertakePrice)) {
          return false
        }

        feeList.value[index].price = '0'
        feeList.value[index].customerUndertakePrice = price
        feeList.value[index].networkUndertakePrice = '0'
      },
    },
    payNetwork: {
      execute: (index: number, price: string, type: 'update-fee' | 'input') => {
        const fee = feeList.value[index]
        if (!fee) {
          return false
        }

        if (type === 'update-fee' && Number(feeList.value[index].networkUndertakePrice)) {
          return false
        }

        feeList.value[index].price = '0'
        feeList.value[index].customerUndertakePrice = '0'
        feeList.value[index].networkUndertakePrice = price
      },
    },
  }

  /**
   * 金额更新命令和结算类型映射
   */
  const priceUpdateCommandSettlementMap: Record<
    '1' | '2' | '3',
    'companyBear' | 'collectFromCustomer' | 'payNetwork'
  > = {
    '1': 'companyBear',
    '2': 'collectFromCustomer',
    '3': 'payNetwork',
  }

  /**
   * 设置附件列的宽度
   */
  const setAnnexColumnWidth = () => {
    let maxImageLength = Math.max(...feeList.value.map((item) => item.images.length))

    // 在图片数量小于8张时要把上传按钮的宽度计算进去
    if (maxImageLength < 8) {
      maxImageLength += 1
    }

    // 这是为了解决删剩一张图时，列宽会变得很小，导致标题会换行
    if (maxImageLength > 0) {
      annexColumnWidth.value = maxImageLength * 60 + (maxImageLength - 1) * 8 + 24
    }

    if (annexColumnWidth.value < 130) {
      annexColumnWidth.value = 130
    }
  }

  /**
   * 添加费用详情
   */
  function onAddFeeDetail() {
    feeList.value.push({
      delImageIds: [],
      images: [],
      networkUndertakePrice: '0',
      price: '0',
      qty: 1,
      customerUndertakePrice: '0',
      remark: '',
      type: userStore.isCurrentRoleNetwork ? 3 : 1,
      workFeeProjectId: '',
      kilometers: 0,
      id: '',
    })
  }

  /**
   * 费用删除
   * @param index - 费用索引
   */
  const handleFeeDelClick = (index: number) => {
    if (feeList.value.length === 1) {
      return
    }

    const fee = feeList.value[index]
    if (!fee) {
      return false
    }

    if (fee.id) {
      feeForm.value.delFeeDetailIds.push()
    }

    feeList.value.splice(index, 1)
  }

  /**
   * 保存按钮点击事件
   */
  const onSave = async () => {
    // isEnableTableValidate.value = true
    // if (props.workNo) {
    // const feeTempObj: Record<string, Array<FeeListItem>> = {}
    feeForm.value.feeDetails.length = 0
    for (let i = 0; i < feeList.value.length; i++) {
      const fee = feeList.value[i]
      //   if (Object.keys(feeTempObj).includes(fee.feeId)) {
      //     feeTempObj[fee.feeId].push(fee)
      //   } else {
      //     feeTempObj[fee.feeId] = [fee]
      //   }
      if (!fee.workFeeProjectId) {
        HMessageBox.error('请选择费用名称')
        return
      }
      const files = fee.images.filter((item) => !!item.file).map((item) => item.file)
      if (files.length > 0) {
        const res = await orderAnnexUpload(files)
        feeList.value[i].images = feeList.value[i].images.filter((item) => !item.file)
        res.data.data.rows.forEach((imgUrl) => {
          feeList.value[i].images.push({
            id: '',
            image: imgUrl,
          })
        })
      }
    }

    let res: APIResponse = {
      code: 20000,
      message: '',
      success: true,
      data: {
        row: {},
      },
      hasOtherCode: false,
      otherCodePrefix: null,
    }

    if (props.workNo) {
      updateForm.value.checkVoList[0] = {
        id: props.feeId,
        remark: feeForm.value.remark,
        feeDetails: feeList.value.map((item) => {
          return {
            customerUndertakePrice: Number(item.customerUndertakePrice),
            delImageIds: item.delImageIds,
            id: item.id,
            images: item.images,
            networkUndertakePrice: Number(item.networkUndertakePrice),
            price: Number(item.price),
            qty: item.qty,
            remark: item.remark,
            status: item.status,
            type: item.type,
            workFeeProjectId: item.workFeeProjectId,
            kilometers: item.kilometers,
          }
        }),
      }
      res = await update()
    } else {
      feeForm.value.feeDetails = _.cloneDeep(feeList.value)
      res = await formSave()
    }
    if (res.code === 20000) {
      HMessage.success('保存完成')
      onClose()
      reserForm()
      emits('update')
      return
    }
    HMessageBox.error(res.message)
    // }
  }

  /**
   * 费用项目选择事件
   * @param {Object} item - 费用项目
   * @param index - 费用索引
   */
  const handleChangeFeeProject = (item: OrderFeeAPIResponse.OrderFeeOption, index: number) => {
    const fee = feeList.value[index]
    if (!fee) {
      return
    }

    priceUpdateCommand[priceUpdateCommandSettlementMap[fee.type]].execute(
      index,
      String(item.price),
      'update-fee',
    )
  }

  /**
   * 获取工单费用下拉选项
   * @param {string} keyword - 搜索关键字
   */
  const handleFeeOptionsSearch = _.throttle((query: string) => {
    if (getFeeOptionsParam.value.name !== query) {
      getFeeOptionsParam.value.name = query
      getFeeOptions()
    }
  }, 600)

  /**
   * 添加图片
   * @param {UploadFile} file - 文件
   * @param {number} index - 费用索引
   */
  const handleAddFile = async (file: UploadFile, index: number) => {
    if (!file.raw) {
      return false
    }

    if (!file.raw.type.includes('image')) {
      HMessageBox.error('只能上传图片类型的文件')
      return
    }
    if (feeList.value[index].images.length >= 8) {
      HMessageBox.error('上传的数量不能超过8个')
      return
    }
    feeList.value[index].images.push({
      file: file.raw,
      image: URL.createObjectURL(file.raw),
      id: '',
    })
    setAnnexColumnWidth()
  }

  /**
   * 删除文件
   * @param {number} feeIndex - 费用索引
   * @param {number} imgIndex - 文件索引
   */
  const handleFileDelClick = (feeIndex: number, imgIndex: number) => {
    const fee = feeList.value[feeIndex]
    if (!fee) {
      return false
    }

    if (!fee.images[imgIndex]) {
      return false
    }

    if (fee.images[imgIndex].id) {
      HMessageBox.error('禁止删除原本附件')
      return
    }
    const imgs = feeList.value[feeIndex].images.splice(imgIndex, 1)
    feeList.value[feeIndex].delImageIds.push(imgs[0].id)
    setAnnexColumnWidth()
  }

  /**
   * 结算类型选择事件
   * @param index - 费用索引
   */
  const handleSettlementTypeSelect = (index: number) => {
    const fee = feeList.value[index]
    if (!fee) {
      return
    }

    if (!fee.workFeeProjectId) {
      return
    }

    const feeOption = feeOptions.value.find((feeOption) => feeOption.id === fee.workFeeProjectId)
    if (!feeOption) {
      return
    }

    priceUpdateCommand[priceUpdateCommandSettlementMap[`${fee.type}`]].execute(
      index,
      String(feeOption.price),
      'update-fee',
    )
  }

  /**
   * 关闭事件
   */
  const onClose = () => {
    feeList.value.length = 0
    visible.value = false
  }

  /**
   * 公里数输入事件
   * @param {number} index - 费用索引
   */
  const handleKilometerInput = (index: number) => {
    const fee = feeList.value[index]
    if (!fee) {
      return false
    }

    const { kilometers } = fee
    feeList.value[index].kilometers = Number(useSaveSpecifyIntegerAndDecimal(kilometers))
    //    const feeProject = feeProjectOptionList.value.find(
    //      (item) => item.id === feeDetail.workFeeProjectId,
    //    )
    //
    //    if (feeProject.enableRemoteFees && !(feeDetail.networkUndertakePrice > 0)) {
    //      if (feeDetail.kilometers > 20) {
    //        feeDetail.networkUndertakePrice = (feeDetail.kilometers - 20) * 1.2
    //      }
    //    }
  }

  /**
   * 数量输入事件
   * @param {number} index - 费用索引
   */
  const handleQtyInput = (index: number) => {
    const fee = feeList.value[index]
    if (!fee) {
      return false
    }

    const { qty } = fee
    feeList.value[index].qty = Number(useSaveSpecifyIntegerAndDecimal(qty))
  }

  /**
   * 公司承担输入事件
   * @param {number} index - 费用索引
   * @param {string} val - 输入的值
   */
  const handleCompanyBearInput = (index: number, val: string) => {
    priceUpdateCommand['companyBear'].execute(index, val, 'input')
  }

  /**
   * 收取客户输入事件
   * @param {number} index - 费用索引
   * @param {string} val - 输入的值
   */
  const handleCollectFromCustomerInput = (index: number, val: string) => {
    priceUpdateCommand['collectFromCustomer'].execute(index, val, 'input')
  }

  /**
   * 支付部门输入事件
   * @param {number} index - 费用索引
   * @param {string} val - 输入的值
   */
  const handlePayNetworkInput = (index: number, val: string) => {
    priceUpdateCommand['payNetwork'].execute(index, val, 'input')
  }

  /**
   * 弹窗初始化
   */
  const init = async () => {
    getFeeOptions()
    feeList.value = [
      {
        remark: '',
        delImageIds: [],
        images: [],
        networkUndertakePrice: '0',
        price: '0',
        customerUndertakePrice: '0',
        qty: 1,
        kilometers: 0,
        type: userStore.isCurrentRoleNetwork ? 3 : 1,
        workFeeProjectId: '',
        id: '',
      },
    ]

    feeForm.value.workId = props.workId
    if (props.feeId) {
      feeForm.value.id = props.feeId
      await getFeeDetail(props.feeId)
      await getFeeInfo(props.workId, props.feeId)
      feeForm.value.remark = feeInfo.value.applyRemark
      feeList.value = feeInfo.value.feeDetailInfoVos.map((fee) => {
        return {
          customerUndertakePrice: String(fee.customerUndertakePrice),
          networkUndertakePrice: String(fee.networkUndertakePrice),
          price: String(fee.price),
          qty: fee.qty,
          delImageIds: [],
          id: fee.id,
          kilometers: fee.kilometers,
          images: fee.images.map((item) => {
            return {
              id: item.id,
              image: item.image,
              file: null,
            }
          }),
          remark: fee.remark,
          type: fee.type,
          workFeeProjectId: fee.workFeeProjectId,
          feeNo: feeInfo.value.workFeeNo,
        }
      })
    }

    setAnnexColumnWidth()
  }

  watch(visible, (value) => {
    if (value) {
      init()
    }
  })
</script>

<style lang="scss" scoped>
  :deep(.el-select__wrapper) {
    min-height: 28px !important;
    border-radius: 2px !important;
    font-size: 12px !important;
  }

  :deep(.el-input__wrapper) {
    height: 28px !important;
    font-size: 12px !important;
  }

  :deep(.el-table td.el-table__cell) {
    .el-input {
      .el-input-group__prepend {
        padding: 0 2px;
      }
    }
  }

  .validate-fail-select {
    :deep(.el-select__wrapper) {
      box-shadow: 0 0 0 1px $deleteColor inset;
    }
  }

  .add_fee_title {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .info {
    display: flex;
    column-gap: 16px;

    .info-item {
      display: flex;
      column-gap: 8px;

      .label {
        height: 28px;
        line-height: 28px;
        color: gray;
      }

      .value {
        :deep(.el-textarea__inner) {
          width: 200px;
          min-width: 200px;
          max-width: 700px;
          height: 28px;
          min-height: 28px;
          max-height: 85px;
        }
      }
    }

    .order-no,
    .check-status {
      display: flex;
      align-items: center;
    }
  }

  .body {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: 85%;
    margin-top: 12px;

    .info-list {
      display: flex;
      column-gap: 12px;

      .info-item {
        display: flex;
        column-gap: 4px;
        align-items: center;

        .label {
          color: #606266;
        }

        .value {
          :deep(.el-textarea) {
            .el-textarea__inner {
              height: 28px;
              min-height: 28px !important;
              width: 400px !important;
              max-height: 140px !important;
            }
          }
        }
      }
    }
  }

  .fee-item {
    display: flex;
    flex-direction: column;

    .check_header_info_list {
      display: flex;
      column-gap: 72px;
      row-gap: 12px;
      padding-bottom: 6px;
      flex-wrap: wrap;

      .info_item {
        display: flex;
        gap: 5px;
        align-items: flex-start;

        .label {
          color: #606266;
          height: 28px;
          line-height: 28px;
        }

        .value {
          min-height: 28px;
          display: flex;
          align-items: center;

          :deep(.el-textarea) {
            .el-textarea__inner {
              min-height: 28px !important;
              height: 28px;
              max-height: 100px !important;
              min-width: 205px !important;
              max-width: 560px !important;
            }
          }
        }
      }
    }
  }

  :deep(.updata_pic) {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;

    .el-upload {
      &.el-upload--picture-card {
        width: 40px;
        height: 40px;
      }
    }

    .disf_ipc {
      display: flex;
      width: 40px;
      height: 40px;
      position: relative;
      margin-right: 6px;
      border: 1px solid #7f7f7f27;
      border-radius: 2px;
      box-sizing: border-box;
      overflow: hidden;

      .img {
        width: 100%;
        position: absolute;
        border-radius: 2px;
      }

      .item-actions {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
      }

      &:hover .item-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #7f7f7f9d;
        opacity: 1;
        border-radius: 2px;

        .item-preview {
          margin: 0 4px;
          cursor: pointer;

          &:hover {
            transform: scale(1.2);
          }
        }

        .item-delete {
          margin: 0 4px;
          cursor: pointer;

          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }
</style>
